import React from 'react'
import { useState, } from 'react';
import { useSelector, useDispatch } from "umi";
import OrgTree from 'react-org-tree';
import "./Tree.less"

export default function Tree({ departmentList, getDepartmentDetail }) {
    const { isCollapsable } = useSelector(state => state.department);
    departmentList = departmentList.filter(item => {
        const isShow = item.parentLists.some(item => item)
        return !isShow;
    })

    const addProps = (list) => {
        list.forEach(item => {
            item.label = item.departmentName;
            item.id = item._id;
            item.children && item.children.length && addProps(item.children)
        });
    }
    const dispatch = useDispatch();
    addProps(departmentList);
    const data = {
        id: -1,
        label: '公司阻止架构图',
        children: departmentList
    }

    const getDetail = (e, datas) => {
        dispatch({
            type: "department/setIsCollaspable",
            payload: false
        })
        getDepartmentDetail(datas)
    }
    return (
        < OrgTree
            data={data}
            horizontal={true}
            collapsable={isCollapsable}
            expandAll={false}
            onClick={getDetail}
        />
    )
}
